<template>
  <div class="home">
    <div id="header">
      <div class="search-box">
        <search
          v-model="searchValue"
          :auto-fixed="false"
          @on-submit="onSubmit"
          placeholder="输入关键词，“逗号”以空格隔开"
          ref="search"
        ></search>
      </div>
      <div class="swiper">
        <swiper auto height="130px" dots-position="center" dots-class="dots-styles" :loop="true">
          <swiper-item v-for="item in pageBanners" :key="item.id">
            <img class="swiper-img" :src="item.url" :alt="item.name">
          </swiper-item>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Swiper, SwiperItem, Search } from "vux";

export default {
  name: "home",
  components: {
    Search,
    Swiper,
    SwiperItem
  },
  data() {
    return {
      searchValue: "" //搜索框内容
    };
  },
  mounted() {
    // 获取首页信息
    this.$store.dispatch("home/getStoreIndex");
  },
  computed: {
    loading() {
      return this.$store.getters.loading.loading;
    },
    pageBanners() {
      return this.$store.getters.home.homeInfo.pageBanners;
    }
  },
  methods: {
    // 搜索框
    onSubmit(val) {
      console.log("val~~~", val, "searchValue~~~", this.searchValue);
    },

    changeLocation() {
      this.$store.dispatch("home/changeSetting", "菏泽");
    },
    addNum() {
      this.$store.commit("home/increment", 10);
    }
  }
};
</script>

<style lang="less" scoped>
@borderColor: #f7f8fd;
@whiteColor: #ffffff;

#header {
  width: 375px;
  height: 200px;
  padding: 15px 17.5px 0;
  box-sizing: border-box;
  background: url("../assets/images/header-bg.png") #fff no-repeat;
  background-size: contain;
}
.search-box {
  width: 340px;
  & /deep/ .weui-search-bar {
    border-radius: 3px;
    background-color: #fff;
  }
  & /deep/ .weui-search-bar:before,
  & /deep/ .weui-search-bar:after {
    border: none;
  }
  & /deep/ .weui-search-bar__form:before,
  & /deep/ .weui-search-bar__form:after {
    border: none;
    border-radius: 0;
  }
  & /deep/ .weui-search-bar__cancel-btn {
    color: #39f;
    position: relative;
  }
}
.swiper {
  margin-top: 15px;
  .dots-styles {
    position: absolute !important;
    bottom: 0 !important;
  }
  .swiper-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}
</style>

